﻿@using Kunlun.BusinessLogic
@{
	Layout = null;
	var attr = ViewBag.Attribute as Kunlun.Models.Product_attributes;
}
@model Kunlun.Models.Product
<!DOCTYPE html>
<html>
<head>
	<title>@Model.Name</title>
	<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" type="text/css" rel="Stylesheet" />
	<link href="@Url.Content("~/Content/FrameDir/style.css")" type="text/css" rel="Stylesheet" />
	<link href="@Url.Content("~/Content/base/ymPrompt.css")" type="text/css" rel="Stylesheet" />
	<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Content/base/Prompt.js")" type="text/javascript"></script>
	<script type="text/javascript">
		var framewidth = "@attr.Width"; var frameheight = "@attr.Height";
		var photoWidth = 0, photoHeight = 0;
		var photoprice = @attr.Value1; var frameprice = 0;
		var mx = 0, my = 0;
		var PhotoID = 0;
		var glassID = 0, glassPrice = 0, glassName = "";
		var WrokID = 0;
		$(function () {


			$("#tabs").tabs();
			$("#FrameBar").tabs();

			//设置背景色彩
			$(".sel_color li").each(function () {
				$(this).click(function () {
					var strColor = $(this).css("background-color");
					$(".PhotoInfo").css("background-color", strColor);
				});
			});

			$(".pater_list img").each(function () {
				$(this).click(function () {
					if (sel != null) {
						sel.Back = $(this).attr("src");
						sel.BackID = $(this).attr("classID");
						sel.price = $(this).attr("data-price");
						sel.name = $(this).attr("alt");
						ShowFrame();
					} else {
						Alert("请先选择左边卡纸的层数！");
					}
				});
			});
			$(".glass dd input:radio").each(function () {
				$(this).click(function () {
					glassID = $(this).attr("data-id");
					glassPrice = $(this).val();
					glassName = $(this).attr("title");
					ShowFrame();
				});
			});
		});


		function ReturnProduct(str,obj) {
			$(".BarCate dd").each(function () {
				$(this).attr("class", "");
			});
			$(obj).parent().attr("class", "sel");
			$.ajax({
				type: "get",
				dataType: "html",
				url: "/Frame/FrameProduct",
				data: "CategoryID=" + str,
				success: function (msg) {
					var data = msg;
					jQuery("#frame_can").html(data); //加载属性类别
				}

			});
		}
       
	</script>
	<script type="text/javascript" language="javascript">

		var arr = new Array();
		arr[1] = { IsHas: false, Size: 0, Back: "", BackID: "", name: "普通白色", price: 0 };
		arr[2] = { IsHas: false, Size: 0, Back: "", BackID: "", name: "普通白色", price: 0 };
		arr[3] = { IsHas: false, Size: 0, Back: "", BackID: "", name: "普通白色", price: 0 };
		var sel = null;
		var frame_back = "";
		var frame_ID = "";
		var frame_name = "普通相框";
		var frame_price = "0.00";
		//-----------设置卡纸 层级 默认选择卡纸---------------
		function ChangCurMatLevel(laynum) {
			$(".paper_level ul li").each(function (i) {
				$(this).attr("class", "");
			});
			sel = arr[laynum];
			$("#lay" + laynum).attr("class", "sel");
		}

		function SelectFrame(obj) {
			frame_back = $(obj).attr("pic");
			frame_name = $(obj).attr("alt");
			frame_ID = $(obj).attr("classID");
			frame_price = $(obj).attr("data-price");
			ShowFrame();
		}

		//-------选择卡纸层数 begin--------
		function MatLevelSelect(lay, obj) {
			$(".paper_level ul li").each(function (i) {
				arr[i + 1].IsHas = false;
				$(this).hide();
				$(this).attr("class", "");
			});
			$("#level dd").each(function (i) {
				$(this).attr("class", "");
			});
			$(obj).attr("class", "sel");
			for (var i = 1; i <= lay; i++) {
				arr[i].IsHas = true;
				$("#lay" + i).show();
			}
			sel = null;
			ShowFrame();
		}
		function MatSizeSelect(lay, obj) {
			if (sel == null) {
				return;
			}
			sel.Size = lay;
			$("#size dd").each(function (i) {
				$(this).attr("class", "");
			});
			$(obj).attr("class", "sel");
			ShowFrame();
		}

		function ShowFrame() {
			var paper = "<div id='imgDiv'><input type='image' id='FrameObj' style='margin:0px;' src='" + $("#FrameObj").attr("src") + "'/></div>";
			var cs = 0;
			var cprice = frame_price * (@ViewBag.PhotoWidth + @ViewBag.PhotoHeight)/50;
			if(glassID != 0){
				cprice += (glassPrice * @ViewBag.PhotoWidth * @ViewBag.PhotoHeight / 10000);
			}
			for (var i = arr.length - 1; i > 0; i--) {
				if (arr[i].IsHas) {
					cprice += (arr[i].price * @ViewBag.PhotoWidth * @ViewBag.PhotoHeight)/10000;
					var sc = (parseInt(arr[i].Size) + 1) * 10;
					cs += sc * 2;
					if (arr[i].BackID == "") {
						paper = "<div  style='padding:" + sc + "px; background-color:#ffffff;' >" + paper + "</div>";
					} else {
						paper = "<div  style='padding:" + sc + "px; background-image:url(" + arr[i].Back + ");'>" + paper + "</div>";
					}
				}
			}
			cprice += photoprice;
			$("#allmoney").html(cprice.toFixed(2));
			var mw = @attr.Width - cs;
			var mh = @attr.Height - cs;
			$("#layone").html(paper);
			$("#ResultProduct table tr td").each(function () {
				$(this).css("background-image", "url(" + frame_back + ")");
			});
			//$("#ChildShow").html(show);
			if(photoWidth/photoHeight < mw/mh){
				$("#FrameObj").attr("width",mw);
				$("#FrameObj").attr("height",photoHeight * mw/photoWidth);
			}else{
				$("#FrameObj").attr("height",mh);
				$("#FrameObj").attr("width",photoWidth * mh/photoHeight);
			}
			$("#imgDiv").css("height",mh);
			$("#imgDiv").css("width",mw);
			$("#FrameObj").mousedown(function (ev) {
				mx = ev.originalEvent.pageX || ev.originalEvent.x;
				my = ev.originalEvent.pageY || ev.originalEvent.y;
				mx -= parseInt($("#FrameObj").css("margin-left"));
				my -= parseInt($("#FrameObj").css("margin-top"));
				
		
			});

			$("body").mouseup(function () {
				mx = 0;
				my = 0;
			});
			$("body").mousemove(function (ev) {
				var imgw = parseInt($("#FrameObj").attr("width"));
				var imgh = parseInt($("#FrameObj").attr("height"));			
				if(mx != 0 && my != 0){
					var cx = ev.originalEvent.pageX || ev.originalEvent.x;
					var cy = ev.originalEvent.pageY || ev.originalEvent.y;
					cx -= mx;
					cy -= my;
					
					cx = Math.min(cx,0);
					cx = Math.max(cx,-Math.abs(mw - imgw));
					$("#FrameObj").css("margin-left",cx);

					cy = Math.min(cy,0);
					cy = Math.max(cy,-Math.abs(mh - imgh));
					$("#FrameObj").css("margin-top",cy);
					
				}
			});
		}
		//-------选择卡纸层数 end--------

		//等比缩放图片
		function DrawImage(ImgD, kw, kh) {

			var image = new Image();
			image.src = ImgD.src;
			if (image.height < image.width)//说明宽》高＝＝》以宽为标准
			{
				if (image.width > kw) {
					ImgD.width = kw;
					ImgD.height = (image.height * kw) / image.width;
					ImgD.style.marginTop = (kh - (image.height * kw) / image.width) / 2 + "px";
					ImgD.style.marginBottom = ImgD.style.marginTop;
				}
				else {
					ImgD.width = image.width;
					ImgD.height = image.height;
				}
			}
			else//以高为标准
			{
				if (image.height > kh) {
					ImgD.height = kh;
					ImgD.width = (image.width * kh) / image.height;
					ImgD.style.marginLeft = (kw - (image.width * kh) / image.height) / 2 + "px";
					ImgD.style.marginRight = ImgD.style.marginLeft;
				}
				else {
					ImgD.width = image.width;
					ImgD.height = image.height;
				}
			}
		}

		function addcart(obj) {
			obj.disabled = "disabled";
			var order = frame_ID + ",0,0,@Convert.ToInt32(PaperLevel.外框),0,1,0";
			for (var i = arr.length - 1; i > 0; i--) {
				if (arr[i].IsHas) {
					order += "|" + arr[i].BackID + ",0,0," + i + "," + arr[i].Size + ",1,0";
				}
			}
			if(glassID != 0){
				order += "|" + glassID + ",0,0,0,0,1,0";
			}
			var imgw = parseInt($("#FrameObj").attr("width"));
			var imgh = parseInt($("#FrameObj").attr("height"));
			var cha = photoWidth/imgw;
			var cw = parseInt($("#imgDiv").css("width")) * cha;
			var ch = parseInt($("#imgDiv").css("height")) * cha;
			var cx = parseInt($("#FrameObj").css("margin-left")) * cha;
			var cy = parseInt($("#FrameObj").css("margin-top")) * cha;
			
			alert(order);
			$.post("/PersonFrame/SaveFrameDir", { "wID":WrokID,"info": order ,"PhotoID":PhotoID,"w":@ViewBag.PhotoWidth,"h":@ViewBag.PhotoHeight,"clipx":parseInt(Math.abs(cx)),"clipy":parseInt(Math.abs(cy)),"clipw":parseInt(cw),"cliph":parseInt(ch)},
			function (data) {
	
				WrokID = data;
				obj.disabled = "";
				Alert("已经放入购物车！");
				
			});
		}

		function ChangeFrame(cid) {
			$(".BarCate dl").each(function () {
				$(this).css("display", "none");
			});
			$("#CCate-" + cid).css("display", "");
			ReturnProduct(cid);
		}

		function scror() {
			var obj = document.getElementById("frame_can");
			var obj_w = parseInt(obj.style.width);
			obj.scrollLeft = (obj.scrollLeft + obj_w);

		}
		function scrol() {
			var obj = document.getElementById("frame_can");
			var obj_w = parseInt(obj.style.width);
			obj.scrollLeft = (obj.scrollLeft - obj_w);
		}
		function AddCollection() {
			$.post("/MyKunlun/InsertCollection", { "pid": "@Model.pid" },
                function (data) {
                	Alert(data);
                });
               }

	function LoadPhoto(index){
		$("#photos").load("/PersonFrame/DirPhoto", { "dirID": $("#DirSel").val(), "index": index ,w:@ViewBag.PhotoWidth,h:@ViewBag.PhotoHeight,"r":Math.random()}, function () { });
	}



	function ChangePhoto(url,w,h,id) {
		photoWidth = w;
		photoHeight = h;
		PhotoID = id;
		$("#FrameObj").attr("src",url);
		ShowFrame();

	}

	</script>
</head>
<body>
	<div class="logo">
	</div>
	<div class="PhotoInfo">
		<div id="ResultProduct">
			@{Html.RenderAction("Photo", "PersonFrame", new { productpicUrl = Model.ViewPic,w = attr.Width,h = attr.Height });}
		</div>
		<div class="MountInfo">
			@{Html.RenderAction("SelectPhoto", "PersonFrame");}
		</div>
	</div>
	@{Html.RenderAction("ChooseInfo", "Frame", new { CategoryID = 91 });}
</body>
</html>
